<template>
    <div style="display: inline-block">
        <Dropdown transfer trigger="hover" @on-click="handleClickUserDropdown">
            <div style="display: inline-block">
                <div class="header-right-icon header-user header-action">
                  <Avatar v-if="false" :src="avatar" size="small"></Avatar>
                    <!--<Avatar v-if="avatar" :src="avatar" size="small"></Avatar>-->
                    <Avatar v-else icon="md-person" size="small"></Avatar>
                    <span class="header-username">{{ nickname }} </span>
                </div>
            </div>
            <DropdownMenu slot="list">
                <DropdownItem name="ownSpace">
                    <Icon type="md-person" style="margin: 0 10px 0 0" />
                    {{ $t('userCenter') }}
                </DropdownItem>
                <DropdownItem name="changePass">
                    <Icon type="md-unlock" style="margin: 0 10px 0 0" />
                    {{ $t('changePass') }}
                </DropdownItem>
                <DropdownItem name="loginout" divided>
                    <Icon type="md-log-out" style="margin: 0 10px 0 0" />
                    {{ $t('logout') }}
                </DropdownItem>
            </DropdownMenu>
        </Dropdown>

        <!-- 修改密码 -->
        <changePass v-model="showChangePass" />
    </div>
</template>

<script>
import { getOtherSet } from '@/api/index';
import util from '@/libs/util.js';
import changePass from '@/views/change-pass/change-pass';
import { logOutApi } from '@/api/common';
export default {
    name: 'user',
    components: {
        changePass
    },
    props: {},
    computed: {
        nickname() {
            return this.$store.state.user.nickname;
        },
        avatar() {
            return this.$store.state.user.avatar;
        }
    },
    data() {
        return {
            showChangePass: false
        };
    },
    methods: {
        init() {},
        handleClickUserDropdown(name) {
            if (name == 'ownSpace') {
                // util.openNewPage(this, 'ownspace_index');
                this.$router.push({
                    name: 'ownspace_index'
                });
            } else if (name == 'changePass') {
                this.showChangePass = true;
            } else if (name == 'loginout') {
                logOutApi()
                // 退出登录
                this.$store.commit('setLoading', true);
                getOtherSet().then(res => {
                    this.$store.commit('setLoading', false);
                    if (res.result) {
                        let domain = res.result.ssoDomain;
                        Cookies.set('accessToken', '', {
                            domain: domain,
                            expires: 7
                        });
                    }
                    this.$store.commit('logout', this);
                    this.setStore('accessToken', '');
                    // 强制刷新页面 重新加载router
                    location.reload();
                });
            }
        }
    },
    mounted() {
        this.init();
    }
};
</script>

<style lang="less" scoped>
.header-username {
    font-size: 16px;
}
</style>
